Description

Fix an issue when the elements input has a controlled value, it was not getting updated when the value changed. Causing stale values to persist.

Renamed the prop to providedValue as its not only used for the initialValue.

Example usage in AIO components rebuild to support the country code being separated from the formatted phone number.

function Example() {
  const [val, setVal] = useState('')
  return (
    <>
      // Hidden elements input
      <Common.Input hidden value={val} />
      <input value={val} onChange={e => setValue(e.target.value}} />
    </>
  )
}

BEFORE

AFTER

https://linear.app/clerk/issue/SDKI-136/ensure-controlled-inputs-value-is-up-to-date-and-sent-to-machine-on

Checklist

• npm test runs as expected.
• npm run build runs as expected.
• (If applicable) JSDoc comments have been added or updated for any package exports
• (If applicable) Documentation has been updated

Type of change

• 🐛 Bug fix
• 🌟 New feature
• 🔨 Breaking change
• 📖 Refactoring / dependency upgrade / documentation
• other: